<template>
    <div class="post-list">
        <article v-for="(post, index) in posts" :key="index" class="card mb-3 shadow-sm">
          <div class="card-body">
              <h4>
                  <router-link to='/'>{{post.title}}</router-link>
              </h4>
              <div class="row my-3 align-items-center">
                  <div v-if="post.image" class="col-4">
                      <img :src="post.image && post.image.fitUrl" :alt="post.title" class="rounded-lg w-100">
                  </div>
                  <p :class="{'col-8':post.image}" class="text-muted">{{post.excerpt}}</p>
              </div>
              <span class="text-muted">{{post.createdAt}}</span>
          </div>
        </article>
    </div>
</template>
<script lang="ts">
import { defineComponent, PropType, computed } from 'vue'
import { PostProps, ImageProps } from '../store/types.d'
import { generateFitUrl } from '../utils/helper'
export default defineComponent({
  name: 'PostList',
  props: {
    list: {
      required: true,
      type: Array as PropType<PostProps[]>
    }
  },
  setup (props) {
    const posts = computed(() => {
      return props.list.map(post => {
        generateFitUrl(post.image as ImageProps, 200, 110.0.m_fill)
        return post
      })
    })
    return {
      posts
    }
  }
})
</script>
